<template>
  <el-container class="bk_full_wapper_pdtb">
    <el-header class="height_auto pdbt">
      <el-row :gutter="6" class="bk_padding_le_rg">
        <el-col :span="12">
          <vxe-input
            id="treeSreach"
            v-model="searchVal"
            placeholder="函数名称"
            type="search"
            size="mini"
            prefix-icon="fa fa-sitemap"
            class="input_bk"
            @search-click="refresh(searchVal)"
          />
        </el-col>
        <el-col :span="12" style="text-align: right;">
          <el-button
            type="text"
            icon="fa fa-angle-double-down"
            size="mini"
            @click="open()"
          />
          <el-button
            text-align="right"
            type="text"
            icon="fa fa-angle-double-up"
            size="mini"
            @click="close()"
          />
          <el-button
            type="text"
            icon="el-icon-refresh"
            size="mini"
            @click="refresh"
          >刷新
          </el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-main style="overflow:auto;">
      <template>
          <!--左侧div内容-->
          <ps-tree
            ref="leftTree"
            :tree-comp-data="treeComp"
            @onTreeClick="onTreeClick"
            @refresh="refresh"
            @onAsyncSuccess="sonAsyncSuccess"
          />
      </template>
    </el-main>
    <el-footer>
      <el-container style="padding:0px 4px 4px;">
        <el-main>
          <fieldset>
            <legend>函数介绍</legend>
            <el-scrollbar style="height:200px">
              <div v-html="mangerformdata.funDesc" />
            </el-scrollbar>
          </fieldset>
          <!-- <form-panel
            ref="myFuncRef"
            formkey="TS_FUN_MODLE"
            :data="mangerformdata"
          /> -->
        </el-main>
      </el-container>
    </el-footer>
  </el-container>
</template>
<script>
import psTree from '@/components/psTree/psTree'
import formpanel from '@/components/formpanel'
export default {
  components: {
    psTree,
    'form-panel': formpanel
  },
  data() {
    return {
      mangerformdata: {},
      searchVal: '',
      treeComp: {
        treeConfigKey: 'TS_FUN_TREE',
        treeBuildConfig: {
          dealTreaparam: this.dealTreaparam,
          dataFilter: this.datafilter,
          onDblClick: this.onTreeDblClick
        }
      }
    }
  },
  methods: {
    sonAsyncSuccess(){
      this.$refs.leftTree.ztreeObj.expandNode(this.$refs.leftTree.ztreeObj.getNodes()[0])
    },
    // 树点击事件
    onTreeClick(e, id, node) {
      if (node.istag === '0') {
        this.mangerformdata = {
          funCd: node.funCd,
          formula: node.formula,
          funNm: node.funNm,
          ffun: node.ffun,
          isValid: node.isValid,
          sord: node.sord,
          funDesc: node.funDesc }
      }
    },
    onTreeDblClick(event, treeId, treeNode) {
      // 向父级抛出函数
      this.$emit('funClick', this.mangerformdata.formula, this.mangerformdata.funNm)
    },
    datafilter(treeid, pnode, resdata) {
      const t = this
      const myresdata = resdata.data
      const testdata = []
      if (myresdata && myresdata.length > 0) {
        t.$_.forEach(myresdata, (item, val) => {
          if (Number(item.leaf) > 0)item.isParent = true
          if (item.leaf === '0') item.isParent = false
          else if (Number(item.leaf) > 1 && t.searchVal) {
            if (item.name.indexOf(t.searchVal) === -1) return
            else {
              testdata.push(item)
            }
          }
        })
      } else {
        if (pnode) { pnode.isParent = false }
      }
      if (testdata.length === 0) {
        return myresdata
      }
      return testdata
    },
    dealTreaparam(treeid, node) {
      if (node === undefined || node === null) {
        return { p0: 'BK_ROOT' }
      } else {
        return { p0: node.id }
      }
    },
    refresh(node) {
      this.$refs.leftTree.refresh()
    },
    // 树的展开和闭合
    open() {
      this.$refs.leftTree.ztreeObj.expandAll(true)
    },
    close() {
      this.$refs.leftTree.ztreeObj.expandAll(false)
      this.$refs.leftTree.ztreeObj.expandNode(this.$refs.leftTree.ztreeObj.getNodes()[0])
    }

  }
}
</script>
<style lang="scss" scoped>
.bk_full_wapper_pdtb{
  background:#fff;
}
fieldset{
  border:1px solid #dfdfdf;
}
</style>
